<template>
	<!-- 定义一个查询容器组件 -->
	<MkQueryContainer style="overflow: auto; display: block;">
		<!-- 定义查询容器的头部模板 -->
		<template #header="">
			<MkForm ref="queryForm" :model="searchParam">
				<MkInput label="申请单" @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
				<MkInput label="患者Id" @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
				<MkInput label="关键字" @keyup.enter.native="search" v-model="searchParam.keyword" clearable />
				<el-checkbox v-model="ctx.jinTian" label="今天" @change="search" />
				<el-checkbox v-model="ctx.zuoTian" label="昨天" @change="search" />
				<el-checkbox v-model="ctx.qianTian" label="前天" @change="search" />
			</MkForm>
		</template>
		<MkTable :data="tableData" v-loading="loading" @row-dblclick="handleDoubleClick" :showHeader="false" fit>
			<MkColumnIndex width="45px" />
			<el-table-column>
        <template #default="{ row }">
          <div>
            <div>
              <span class="strongText">{{ row.xingMing }}</span>
              <el-divider direction="vertical" />
              <span>{{ row.huanZheId }}</span>
              <el-divider direction="vertical" />
              <span>{{ row.xingBie }}</span>
              <el-divider direction="vertical" />
              <span>{{ row.chuangHao }}</span>
            </div>
            <div style="font-size: 1.2rem;">
              {{ row.xianXueMa?.substring(0, 5) }} {{ row.xianXueMa?.substring(5, 7) }}
              <span style="font-size: 1.3rem; font-weight: bold;">{{ row.xianXueMa?.substring(7, 13) }}</span>
              {{ row.xianXueMa?.substring(13) }}
              <el-divider direction="vertical" />
              {{ row.chanPinId }}
            </div>
            <div>
              {{  row.xueYeMingCheng }}{{ row.rongLiang }}{{ row.danWei }}
            </div>
          </div>
        </template>
      </el-table-column>
		</MkTable>
		<!-- 定义一个分页组件，用于分页查询结果 -->
		<MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
			layout="total, sizes, prev, pager, next" @query="search" />
	</MkQueryContainer>
</template>

<script lang='ts' setup>
/// 血液列表，显示当前科室的发血血液（按入科科室？按申请单科室？）
/// 根据模块，显示待输血前核对的血液、待输血15分钟的血液、待输血结束记录的血液
// 导入申请单相关的 API 和输出类型
// 导入分页查询的自定义钩子
import { usePageQuery } from '/@/hooks/usePageQuery'
// 定义组件的自定义事件
const emits = defineEmits(['load', "dblclick"])
interface ShuZhuXueYe {
  xingMing: string
  huanZheId: string
  xingBie: string
  chuangHao: string
  xianXueMa: string
  chanPinId: string
  xueYeMingCheng: string
  rongLiang: string
  danWei: string
}

// 模拟接口数据
const mockData = [
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
  {
    xingMing: '张三',
    huanZheId: '001100123',
    xingBie: '男',
    chuangHao: '9床',
    xianXueMa: '4406551409231',
    chanPinId: 'P0065VB0',
    xueYeMingCheng: '红细胞',
    rongLiang: '2',
    danWei: 'u'
  },
  {
    xingMing: '李四',
    huanZheId: '001200123',
    xingBie: '女',
    chuangHao: '2床',
    xianXueMa: '4406559909211',
    chanPinId: 'B0011VB0',
    xueYeMingCheng: '新鲜冰冻血浆',
    rongLiang: '100',
    danWei: 'ml'
  },
];

const page = async () => {
  // 模拟接口请求延迟
  await new Promise(resolve => setTimeout(resolve, 500));
  return {
    items: mockData.slice(((searchParam.page ?? 1) - 1) * (searchParam.pageSize ?? 10), (searchParam.page ?? 1) * (searchParam.pageSize ?? 10)),
    total: mockData.length
  };
};
// 使用分页查询钩子获取搜索参数、总数、表格数据、加载状态和搜索方法
const { searchParam, total, tableData, loading, search } = usePageQuery<ShuZhuXueYe>(page)
  tableData.value = []
// 定义一个响应式对象，用于存储筛选条件的状态
const ctx = reactive({
	// 今天的筛选状态
	jinTian: true,
	// 昨天的筛选状态
	zuoTian: true,
	// 前天的筛选状态
	qianTian: true,

  zhuangTai: undefined
})

// 定义表格行双击带出申请单
const handleDoubleClick = (row) => {
	emits('dblclick', row)
}

// 组件挂载后触发搜索
onMounted(() => {
	search();
})
const changeZhuangTai = (val) => {
  ctx.zhuangTai = val;
  search();
}
defineExpose({ changeZhuangTai })
</script>

<style lang='scss' scoped>
:deep(.el-pagination) {
  margin: 10px 0 10px 0 !important;
}
</style>